import './css/index.scss'
import { Card, Avatar } from 'antd';
import { useEffect, useState, useRef } from 'react';
import { getPersonalInfo } from '@/api/workbeach'
import {
    EditTwoTone
} from '@ant-design/icons'

import UpdateModal from './components/UpdateModal'

const WorkBeach = () => {
    const [info, setInfo] = useState({})
    const showModalRef = useRef(null)
    const getInfo = async () => {
        try {
            const userinfo = JSON.parse(sessionStorage.getItem('userinfo'))
            const { data } = await getPersonalInfo({ nickname: userinfo.nickname })
            setInfo({ ...data })
        } catch (err) { }
    }

    const showUpdateModal = () => {
        showModalRef.current.showModal(info)
    }

    const reFresh = () => {
        getInfo()
    }

    useEffect(() => {
        getInfo()
    }, [])

    return (
        <div className='work-beach'>
            <Card>
                <div className='work-beach-content'>
                    <div className='work-beach-top'>
                        <div className='work-beach-top-left'>
                            <Avatar src={info.imgs} size={100} />
                        </div>
                        <div className='work-beach-top-right'>
                            <div className='work-beach-title'>
                                <span>{info.name}</span>
                                <span className='info-height'>{info.height}</span>
                                <span>
                                    <EditTwoTone style={{ fontSize: '16px', cursor: 'pointer' }} onClick={showUpdateModal} />
                                </span>
                            </div>
                            <div className='work-beach-item'>
                                <span>评分: {info.rating}</span>
                                <span>场次: {info.sessioned}</span>
                                <span>胜率: {info.winRate}%</span>
                            </div>
                            <div className='work-beach-item'>
                                <span>RWS: {info.RWS}</span>
                                <span>ADR: {info.ADR}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </Card>
            <UpdateModal ref={showModalRef} onSuccess={reFresh} />
        </div>
    )
}
export default WorkBeach;